<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
    </div>
    <div>--------------------------------</div>
    <div id="mydiv">
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
    </div>
    <script>
        // ES6中class构造器数据劫持
        class Book{
            _name="默认值";
            _root=null;
            constructor(options={}){
                this._root=document.querySelector(options.el);//获取DOM对象
            }
            get name(){
                console.log("Book name被获取");
                return this._name;
            }
            set name(val){
                console.log("Book name被赋值");
                let tempList=this._root.querySelectorAll("[mv-text='name']");///DOM对象.querySelectorAll(css选择器)
                tempList.forEach(item=>{
                    item.innerHTML=val;
                });
                this._name=val;
            }
        }

        let book=new Book({
            el:"#mydiv"
        });
        console.log(book);
       book.name="哈哈哈";//赋值操作
    </script>
</body>
</html>